<template>
  <div>
    <!-- 申请列表 -->

    <!-- 表单 -->
    <el-form size="small" :model="form" :inline="true">
      <el-form-item label="申请类型" style="font-weight:bold;">
        <el-select v-model="form.businessType" placeholder="请选择申请类型" style="width:200px;" clearable>
          <el-option label="入住申请" value="1"></el-option>
          <el-option label="退宿申请" value="2"></el-option>
          <el-option label="变更申请" value="3"></el-option>
          <el-option label="信息修改申请" value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请状态" style="font-weight:bold;">
        <el-select v-model="form.businessState" placeholder="请选择申请状态" style="width:200px;" clearable>
          <el-option label="待审核" value="0"></el-option>
          <el-option label="通过" value="1"></el-option>
          <el-option label="拒绝" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间段" style="font-weight:bold;">
        <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-button size="small" class="search_button" type="primary" icon="el-icon-search"
        @click="getDataList">查询</el-button>
      <el-button size="small" class="reset_button" icon="el-icon-refresh" @click="reset">重置</el-button>
    </el-form>
    <!-- 表单 -->

    <el-divider></el-divider>

    <!-- 表格 -->
    <el-table size="medium" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
      @selection-change="handleSelectionChange" border>
      <el-table-column prop="userName" label="申请人" align="center"></el-table-column>
      <!-- <el-table-column prop="roomNum" label="住宿信息" align="center"></el-table-column> -->
      <el-table-column prop="businessType" label="申请类型" align="center">
        <template slot-scope="scope">
          <span v-if="(scope.row.businessType == 1)">入住申请</span>
          <span v-if="(scope.row.businessType == 2)">退宿申请</span>
          <span v-if="(scope.row.businessType == 3)">调寝申请</span>
          <span v-if="(scope.row.businessType == 4)">学生学院修改申请</span>
          <span v-if="(scope.row.businessType == 5)">教职工学院修改申请</span>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="申请理由" align="center"></el-table-column>
      <el-table-column prop="createTime" label="申请时间" align="center" width="160"></el-table-column>
      <el-table-column prop="businessState" label="申请状态" align="center">
        <template slot-scope="scope">
          <span v-if="(scope.row.businessState == 0)">待审核</span>
          <span v-if="(scope.row.businessState == 1)" style="color:#67C23A;">通过</span>
          <span v-if="(scope.row.businessState == 2)" style="color:red;">拒绝</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="结束时间" align="center" width="160"></el-table-column>

      <el-table-column label="申请详情" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="goDetail(scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="申请详情" :visible.sync="showDetail" width="800px" style="margin-top:10px" append-to-body>
      <el-descriptions class="margin-top" title="申请人信息" :column="3" size="mini" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            申请人
          </template>
          {{ userInfo.userName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            <span v-show="userInfo.businessType == 5">工号</span>
            <span v-show="userInfo.businessType != 5">学号</span>
          </template>
          {{ userInfo.userNum }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            学院
          </template>
          {{ userInfo.collegeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            申请类型
          </template>
          <el-tag size="small" v-show="userInfo.businessType == 1">入住申请</el-tag>
          <el-tag size="small" v-show="userInfo.businessType == 2">退宿申请</el-tag>
          <el-tag size="small" v-show="userInfo.businessType == 3">调寝申请</el-tag>
          <el-tag size="small" v-show="userInfo.businessType == 4">学生学院修改申请</el-tag>
          <el-tag size="small" v-show="userInfo.businessType == 5">教职工学院修改申请</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            住宿信息
          </template>
          {{ userInfo.campusName }} {{ userInfo.buildName }} {{ userInfo.roomNum }} {{ userInfo.bedCode }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-check"></i>
            签名
          </template>
          <el-button size="mini" type="primary" plain @click="showSignSelf = true">查看</el-button>
          <el-dialog title="签名" :visible.sync="showSignSelf" width="400px" style="margin-top:10px" append-to-body>
            <img :src="userInfo.imgUrl" alt="" style="width:200px">
          </el-dialog>
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions style="margin-top:10px;" class="margin-top" title="审批人信息" :column="3" size="mini" border
        v-for="item in examine" :key="item.adminId">
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            <span v-show="item.clientRole == 1">辅导员</span>
            <span v-show="item.clientRole == 2">院领导</span>
            <span v-show="item.clientRole == 3">楼长</span>
            <span v-show="item.clientRole == 4">后勤办公室</span>
            <span v-show="item.clientRole == 5">财务处</span>
            <span v-show="item.clientRole == 6">单校区负责人</span>
            <span v-show="item.clientRole == 7">保卫处</span>
          </template>
          {{ item.adminName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-check"></i>
            签名
          </template>
          <!-- <img :src="item.imgUrl" alt="" style="width:100px"> -->
          <el-button size="mini" type="primary" plain @click="showSign(item.imgUrl)">查看</el-button>
          <el-dialog title="签名" :visible.sync="showSignOther" width="400px" style="margin-top:10px" append-to-body>
            <img :src="nowImgUrl" alt="" style="width:200px">
          </el-dialog>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            审批结果
          </template>
          <el-tag size="small" v-show="item.result == 0" type="success">同意</el-tag>
          <el-tag size="small" v-show="item.result == 1" type="danger">拒绝</el-tag>
          <el-tag size="small" v-show="!item.result" type="info">待审批</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            审批意见
          </template>
          {{ item.reason }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            审批时间
          </template>
          <span v-show="item.reason">{{ item.modifyTime }}</span>
        </el-descriptions-item>


      </el-descriptions>
      <!-- <div id="detail_box" v-for="item in examine" :key="item.adminId">
                                            <div>审批人：{{ item.adminName }}</div>
                                            <div>审批时间：{{ item.modifyTime }}</div>
                                            <div>审批内容：{{ item.reason }}</div>
                                          </div> -->
    </el-dialog>

    <el-pagination class="pagination" background layout="total, sizes, prev, pager, next, jumper" :total="total"
      :page-size="10" :page-sizes="[10, 20, 30, 40]" @current-change="handleCurrentChange"
      @size-change="handleSizeChange"></el-pagination>

  </div>
</template>

<script>
import { getListApply, lookDetail } from "_api/DormManage/Apply/index.js"
export default {
  data() {
    return {
      form: {
        businessState: "",
        businessType: "",
        current: 0,
        field: "",
        order: "",
        pageSize: 10
      },
      tableData: [],
      total: 0,
      showDetail: false,
      //  申请人信息
      userInfo: "",
      // 审批详情
      examine: [],
      showSignSelf: false,
      showSignOther: false,
      nowImgUrl: ""
    }
  },
  methods: {
    showSign(e) {
      // console.log(e);
      this.nowImgUrl = e
      this.showSignOther = true
    },
    goDetail(e) {
      this.userInfo = ""
      this.showDetail = true
      lookDetail({ businessId: e }).then(res => {
        if (res.data.success == true) {
          this.userInfo = res.data.data
          this.examine = res.data.data.verificationList
        }
      })

    },
    handleSelectionChange() {
    },
    //重置
    reset() {
      this.form = {
        businessState: "",
        businessType: "",
        current: 0,
        field: "",
        order: "",
        pageSize: 10
      }
      this.getList()
    },
    handleCurrentChange(e) {
      //当前页
      this.form.current = e
      this.getList()
    },
    // 查询按钮
    getDataList() {
      this.form.current = 0
      this.getList()
    },
    handleSizeChange(e) {
      this.form.pageSize = e
      this.getList()
    },
    //申请列表查询
    getList() {
      getListApply(
        this.form
      ).then(res => {
        console.log(res)
        if (res.data.success == true) {
          var list = res.data.data.list
          list.forEach(item => {
            if (item.campusName == null) {
              item.campusName = ""
            }
            if (item.buildName == null) {
              item.buildName = ""
            }
            if (item.roomNum == null) {
              item.roomNum = ""
            }
            if (item.bedCode == null) {
              item.bedCode = ""
            }
            item.roomNum = item.campusName + item.buildName + item.roomNum + item.bedCode
            // var Time=[]
            // item.time.forEach(item => {
            //   if (item <= 9) {
            //   item = "0" + item
            //   }
            //   Time.push(item)
            // })
            // item.time=Time[0] + "-" + Time[1] + "-" + Time[2] + " " + Time[3] + ":" + Time[4] + ":" + Time[5]
          })
          this.tableData = list
          this.total = res.data.data.total
        } else {
          this.$message.info(res.data.message)
        }
      })
    }
  },
  created() {
    this.getList()
  },
};
</script>
<style lang="scss" scoped>
.search_button {
  margin-left: 50px;
}

.reset_button {
  margin-left: 10px;
}

.newly_button {
  margin-left: 5px;
}

.pagination {
  float: right;
  margin-top: 10px;
}

#detail_box {
  margin-bottom: 30px;
}

#detail_box div {
  margin-bottom: 10px;
}
</style>
